<template>
	<view>
		<view class="swiper-box">
			<base-swiper height="100%" :list="list" radius="0px"></base-swiper>
		</view>
		<view class="info-box">
			<view class="info-header">clw酒店</view>
			<view class="info-cell">
				<u-icon name="phone-fill" color="#EFC14E" size="16"></u-icon>
				<view class="text">84137777</view>
			</view>
			<view class="info-cell">
				<u-icon name="map-fill" color="#EFC14E" size="16"></u-icon>
				<view class="text">仅限一桌消费。绍兴市柯桥区柯岩街道柯南大道1788号</view>
			</view>
		</view>
		<view class="desc-box">
			<view class="desc-header">商家介绍</view>
			<u-parse :content="content"></u-parse>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
page{
	background-color: #F4F4F4;
}
.swiper-box{
	width: 100%;
	height: 300rpx;
}
.info-box{
	margin: 30rpx 20rpx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	.info-header{
		margin-bottom: 4rpx;
		font-size: 36rpx;
		font-weight: 600;
	}
	.info-cell{
		display: flex;
		gap: 8rpx;
		align-items: baseline;
		margin-bottom: 6rpx;
		.text{
			font-size: 28rpx;
			color: #333;
			
			/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
			display: -webkit-box;
			/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
			-webkit-box-orient:vertical;
			/*要显示的行数*/
			-webkit-line-clamp:2;
			/* 溢出部分隐藏 */
			overflow:hidden;
		}
	}
}
.desc-box{
	margin: 30rpx 20rpx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	.desc-header{
		margin-bottom: 4rpx;
		font-size: 28rpx;
		font-weight: 600;
	}
}
</style>
